<template>
  <template v-if="inboundTagKeys.length > 0">
    <v-chip
      v-for="k in inboundTagKeys"
      :key="k"
      class="mr-1 mb-1"
      size="small"
      :style="inboundChipStyle(k)"
      variant="outlined"
    >
      {{ inboundLabel(k) }}
    </v-chip>
  </template>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  getInboundTagChipStyle,
  getInboundTagPreset,
  INBOUND_TAG_BY_KEY
} from '../../services/inboundTags'
import type { InboundTagKey } from '../../services/inboundTags'

const props = defineProps<{ tags?: string[] }>()

const { locale } = useI18n()

const inboundTagKeys = computed<InboundTagKey[]>(() => {
  const tags = props.tags ?? []
  return tags.filter((t): t is InboundTagKey => (INBOUND_TAG_BY_KEY as any)[t])
})

function inboundChipStyle(key: InboundTagKey) {
  return getInboundTagChipStyle(key)?.style ?? {}
}

function inboundLabel(key: InboundTagKey): string {
  const p = getInboundTagPreset(key)
  if (!p) return key
  const isZh = (locale.value || '').toLowerCase().startsWith('zh')
  return p.label[isZh ? 'zh' : 'en'] || key
}
</script>

<style scoped>
/* 占位：如需统一间距可在此处调整 */
</style>
